import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge, Tabs, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;

const TabPane = Tabs.TabPane;


class P extends React.Component {

  callback=(key)=> {
    this.props.dispatch({type:'task/saveTabActiveKey', payload:{data:key}});
  }


  render() {
    const { dispatch, items, items1, items2, tabActiveKey } = this.props;
    const total = items[6].length + items[7].length;

    const data1 = [
      {
        icon: <img alt="" src={require('../assets/c8.png')} className="am-icon am-icon-lg" />,
        text: <div><img className={styles.nnImg} src={require('../assets/c8.png')} className="am-icon am-icon-lg" /><div className={styles.gridTitle}>升1阶段</div><div className={styles.gridDescription}>适合0-6个月的宝宝</div></div>,
        title:'升1阶段',
        desc: '适合0-6个月的宝宝',
        type: 3,
        img: require('../assets/c8.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c9.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升2阶段</div><div className={styles.gridDescription}>适合6-12个月的宝宝</div></div>,
        title:'升2阶段',
        desc: '适合6-12个月的宝宝',
        type: 0,
        img: require('../assets/c9.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c10.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升3阶段</div><div className={styles.gridDescription}>适合12-36个月的宝宝</div></div>,
        title:'升3阶段',
        desc: '适合12-36个月的宝宝',
        type: 1,
        img: require('../assets/c10.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c11.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升4阶段</div><div className={styles.gridDescription}>适合36个月以上的宝宝</div></div>,
        title:'升4阶段',
        desc: '适合36个月以上的宝宝',
        type: 2,
        img: require('../assets/c11.png'),
        href: '/p1',
      },
    ];

    const data2 = [
      {
        icon: <img alt="" src={require('../assets/c8.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升NB码</div><div className={styles.gridDescription}>适合1个月以下的宝宝</div><div className={styles.gridDescription}>5kg以下</div></div>,
        title: '升NB码',
        desc: '适合1个月以下的宝宝',
        type: 0,
        img: require('../assets/c8.png'),
        href: '/p1',
      },
      {
        icon:<img alt="" src={require('../assets/c9.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升S码</div><div className={styles.gridDescription}>适合1-3个月的宝宝</div><div className={styles.gridDescription}>约4-8kg</div></div>,
        title: '升S码',
        desc: '适合1-3个月的宝宝',
        type: 1,
        img: require('../assets/c9.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c10.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升M码</div><div className={styles.gridDescription}>适合4-6个月的宝宝</div><div className={styles.gridDescription}>约6-11kg</div></div>,
        title: '升M码',
        desc: '适合4-6个月的宝宝',
        type: 2,
        img: require('../assets/c10.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c11.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升L码</div><div className={styles.gridDescription}>适合7-12个月的宝宝</div><div className={styles.gridDescription}>约9-14kg</div></div>,
        title: '升L码',
        desc: '适合7-12个月的宝宝',
        type: 3,
        img: require('../assets/c11.png'),
        href: '/p1',
      },
      {
        icon: <img alt="" src={require('../assets/c12.png')} className="am-icon am-icon-lg" />,
        text: <div><div className={styles.gridTitle}>升XL码</div><div className={styles.gridDescription}>适合12-23个月的宝宝</div><div className={styles.gridDescription}>约12-17kg</div></div>,
        title: '升XL码',
        desc: '适合12-23个月的宝宝',
        type: 4,
        img: require('../assets/c12.png'),
        href: '/p1',
      },
    ];

    return (
      <Container title={this.props.location.query.title}>
        <Tabs defaultActiveKey={tabActiveKey} onChange={this.callback} >
        <TabPane tab={<Badge text={items[6].length || null}>奶粉升阶</Badge>} key="1">
        <div className={styles["ym-container"]}>
          {data1.map((item, index) => {
            return (
              <div 
              key={'kuwxs' + index}
              className={styles["ym-box"]}
              onClick={() => {
                dispatch(routerRedux.push({
                  pathname: item.href,
                  query: {
                    taskType: 6,
                    subType: item.type,
                    title: item.title,
                  },
                }));
              }}
              >
              <img className={styles.nnImg} src={item.img} />
                <div className={styles.nnBox}>
                  <Badge className={styles.ymTitle} text={items1[item.type].length}  style={{ marginLeft: 10 }}>{item.title}</Badge>
                  <div className={styles.ymDescription}>{item.desc}</div>
                </div>
                <div className={styles["icon-right"]}>
                <Icon type="right" size={"md"} />
                </div>
              </div>
            );
          })}
        </div>
        </TabPane>
        <TabPane tab={<Badge text={items[7].length||null}>纸尿裤升码</Badge>} key="2">
            <div className={styles["ym-container"]}>
              {data2.map((item, index) => {
                return (
                  <div 
                  key={'kuwxs' + index}
                  className={styles["ym-box"]}
                  onClick={() => {
                    dispatch(routerRedux.push({
                      pathname: item.href,
                      query: {
                        taskType: 7,
                        subType: item.type,
                        title: item.title,
                      },
                    }));
                  }}
                  >
                  <img className={styles.nnImg} src={item.img} />
                    <div className={styles.nnBox}>
                      <Badge className={styles.ymTitle} text={items2[item.type].length}  style={{ marginLeft: 10 }}>{item.title}</Badge>
                      <div className={styles.ymDescription}>{item.desc}</div>
                    </div>
                    <div className={styles["icon-right"]}>
                    <Icon type="right" size={"md"} />
                    </div>
                  </div>
                );
              })}
            </div>
          </TabPane>
        </Tabs>

      </Container>
    );
  }
}
export default connect((state, props) => {
  return {
    items: state.task ,
    items1: state.task.sub[6],
    items2: state.task.sub[7],
    tabActiveKey: state.task.tabActiveKey,
  };
})(P);
